<template>
    <el-dialog
            :visible.sync="dialogVisible"
            width="500px"
            :before-close="closeDialog"
            append-to-body
            title="关联资源"
    >
    
    
        <div>
            <div slot="header" class="top-from">
                <div class="search-item">
                    <el-input
                            size="small"
                            v-model="resourceFilter"
                            class="input-width clear-input"
                            suffix-icon="el-icon-search"
                            clearable
                            placeholder="请输入查询内容"
                    ></el-input>
                </div>
            </div>
                     
            <div style="margin-top:10px;height:400px;overflow:auto"> 
                <el-tree 
                    show-checkbox
                    class="filter-tree"
                    :default-expanded-keys="expandedKeys"
                    ref="tree"
                    node-key="resourceId"
                    :filter-node-method="filterNode"
                    v-loading="loading"
                    :data="resourceData"
                    :default-checked-keys="checkedKeys"
                    highlight-current
                    :props="resourceProps" >
                    <span class="custom-tree-node" slot-scope="{data}">
                                <span>
                                 
                                    {{ data.resourceName }}
                                    <i :class="data.icon" style="margin-right: 10px"></i>
                                </span>
                    </span>
                </el-tree>
            </div>
                   

        </div>
    
      
        <div class="btn-group" style="margin-top:20px">
            <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
            <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>

    import {relateResource,queryRelateResource} from '@/api/role';
    export default {
        data(){
            return {
                labelPosition:'right',
                dialogVisible: false,
                loading: false,

                expandedKeys:[],
                resourceFilter:"",
                resourceData:[],
                resourceProps:{
                    children: 'children',
                    label: 'resourceName'
                },
                checkedKeys:[],
                form:{
                    roleCode:"",
                    resourceIds:[]
                }
            }
        },
        watch:{
            resourceFilter(val){
                this.$refs.tree.filter(val);
            }
        },
        created(){
        },
        methods:{
            showDialog(row){
                this.dialogVisible = true
                this.form.roleCode = row.roleCode;
                this.querySysResource();
            },
            closeDialog(){
                this.form = {}
                this.dialogVisible = false
                this.loading = false
            },
            //查询系统资源
            async querySysResource(){
                let res = await queryRelateResource({roleCode:this.form.roleCode});
                let data = res.data;
                this.checkedKeys = data.checkedList;
                this.resourceData = data.resources;
            },
            getCheckNods(){
                let nodes = this.$refs.tree.getCheckedNodes();
                let resourceIds = [];
                for(let i in nodes){
                    let node = nodes[i];
                    resourceIds.push(node.resourceId);
                }
                console.log(resourceIds);
                return resourceIds;
            },
            async submit(){
                this.form.resourceIds = this.getCheckNods();
                try{
                    this.loading = true
                    let res = await relateResource(this.form);
                    if(res.status == '200'){
                        this.$message.success('添加成功')
                        this.closeDialog()
                        this.$emit('success')
                    }else{
                        this.$message.error(res.message)
                        this.loading = false
                    }
                }catch{
                    this.loading = false
                }
            },
            
            filterNode(value,data){
                if(!value){
                    return true;
                }
                return data.resourceName.indexOf(value) !== -1;
            },
        }
    }
</script>
<style lang="scss" scoped>
    .btn-group{
        display: flex;
        justify-content: right;
        .el-button{
            width: 50px;
        }
    }
    .el-form-item{
        height: 40px;
    }
</style>